<template>
  <div class="container">
    <el-row :gutter="20">
      <!--左-->
      <el-col :xs="24" :sm="24" :md="24" :lg="18">
        <el-card class="border-radius mg-t-20">
          <div slot="header">
            <span class="fs-14"><i class="el-icon-document f-blue-color"></i> 网站详情</span>
          </div>
          <el-skeleton :animated="true" :loading="read_loading" :rows="0" :throttle="200">
            <template slot="template">
              <client-only><!--解决控制台报错-->
                <el-row class="read-content text-center">
                  <el-col :span="24">
                    <el-skeleton-item variant="image" style="width: 100px; height: 100px; margin: 0 auto; border-radius: 100%" />
                  </el-col>
                  <el-col :span="24">
                    <h1 class="fs-18"><el-skeleton-item variant="h1" style="width: 100px" /></h1>
                  </el-col>
                  <el-col :span="24">
                    <el-row type="flex">
                      <el-col>
                        <el-skeleton-item variant="button" style="width: 100px" />
                        <el-skeleton-item variant="button" style="width: 100px" />
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="24">
                    <p class="fs-14"><el-skeleton-item variant="p" style="width: 80%" /></p>
                  </el-col>
                  <el-col :span="24">
                    <el-row type="flex">
                      <el-col>
                        <el-skeleton-item variant="p" style="width: 80px" />
                        <el-skeleton-item variant="p" style="width: 80px" />
                        <el-skeleton-item variant="p" style="width: 80px" />
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="24">
                    <div class="fs-14">
                      <el-row type="flex">
                        <el-col>
                          <el-skeleton-item variant="p" style="width: 50px" />
                          <el-skeleton-item variant="p" style="width: 80px" />
                          <el-skeleton-item variant="p" style="width: 30px" />
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div class="fs-14">
                      <el-row type="flex">
                        <el-col>
                          <el-skeleton-item variant="p" style="width: 40px" />
                          <el-skeleton-item variant="p" style="width: 80px" />
                          <el-skeleton-item variant="p" style="width: 30px" />
                        </el-col>
                      </el-row>
                    </div>
                  </el-col>
                </el-row>
              </client-only>
            </template>
            <template>
              <el-row class="read-content text-center">
                <el-col :span="24">
                  <el-image style="width: 100px;height: 100px;border-radius: 100%" class="img"
                            :src="(linksInfo.webIcon == null) ? '': imgPrefix + linksInfo.webIcon"
                            :preview-src-list="[(linksInfo.webIcon == null) ? '': imgPrefix + linksInfo.webIcon]">
                    <div slot="error" class="image-slot">
                      <img style="width: 100px; height: 100px" src="@/static/image/img_error.png"/>
                    </div>
                  </el-image>
                </el-col>
                <el-col :span="24">
                  <h1 class="fs-18">{{ linksInfo.webName }}</h1>
                </el-col>
                <el-col :span="24">
                  <el-tooltip effect="dark" content="浏览量" placement="top">
                    <el-button type="info" icon="el-icon-view" size="mini">{{ linksInfo.webViews }}</el-button>
                  </el-tooltip>
                  <el-tooltip effect="dark" content="收藏" placement="top" v-if="!isCollection">
                    <el-button @click="collect(linksInfo.id)" type="warning" icon="el-icon-star-off" size="mini">{{ linksInfo.webCollection }}</el-button>
                  </el-tooltip>
                  <el-popconfirm @confirm="cancelCollection(linksInfo.id)" title="确定取消收藏吗？" icon="el-icon-info" icon-color="red" v-else>
                    <template slot="reference">
                      <el-tooltip effect="dark" content="取消收藏" placement="top">
                        <el-button style="margin-left: 10px;" type="danger" icon="el-icon-star-on" size="mini">{{ linksInfo.webCollection }}</el-button>
                      </el-tooltip>
                    </template>
                  </el-popconfirm>
                </el-col>
                <el-col :span="24">
                  <p class="fs-14 text-line-height">{{ linksInfo.webDetails }}</p>
                </el-col>
                <el-col :span="24">
                  <el-tooltip effect="dark" :content="item" placement="top" v-for="(item,index) in linksInfo.labelList" :key="index">
                    <nuxt-link :to="'/classify?tag=' + item">
                      <span :class="'tag-item pointer ' + tagClass[index]">{{ item }}</span>
                    </nuxt-link>
                  </el-tooltip>
                </el-col>
                <el-col :span="24">
                  <div class="fs-14">
                    链接：
                    <a class="f-blue-color" :href="'//' + linksInfo.webUrl" target="_blank">
                      {{ linksInfo.webUrl }}
                    </a>
                    <el-tooltip effect="dark" :content="tooltipValue" placement="top">
                      <i class="el-icon-document-copy f-blue-color pointer" @click="copy('//' + linksInfo.webUrl)"></i>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="fs-14">
                    更新时间：{{ linksInfo.createTime }}（{{ timeStr }}）
                  </div>
                </el-col>
              </el-row>
            </template>
          </el-skeleton>
        </el-card>
        <el-card class="border-radius mg-t-20">
          <div slot="header">
            <span class="fs-14"><i class="el-icon-chat-line-round f-blue-color"></i> 评论列表</span>
          </div>
          <Comments :linksId="Number(this.id)"></Comments>
        </el-card>
      </el-col>
      <!--右-->
      <el-col :xs="24" :sm="24" :md="24" :lg="6">
        <el-card class="border-radius mg-t-20">
          <div slot="header">
            <span class="fs-14">随机推荐</span>
            <nuxt-link class="fs-14" to="/" style="float: right;">
              <i class="el-icon-menu"></i>更多
            </nuxt-link>
          </div>
          <TitleList></TitleList>
        </el-card>
        <el-card class="border-radius mg-t-20">
          <div slot="header">
            <span class="fs-14">热门标签</span>
            <nuxt-link class="fs-14" to="/tag" style="float: right;">
              <i class="el-icon-menu"></i>更多
            </nuxt-link>
          </div>
          <Tag></Tag>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  layout: "navigation",
  computed: {
    ...mapState({
      isLogin: state => state.user.isLogin,
      nav_config: state => state.config
    })
  },
  //SEO优化
  head(){
    return{
      title: "网站详情" + this.nav_config.separate + this.seoInfo.webName + this.nav_config.separate + this.nav_config.name,
      meta: [
        { name: 'keywords', content: this.nav_config.keywords + "," + this.seoInfo.webName },
        { hid: 'description', name: 'description', content: this.seoInfo.webDetails },
      ]
    }
  },
  data(){
    return{
      //图片链接前缀
      imgPrefix: process.env.NUXT_APP_BASE_API,
      id: null,
      //标签样式
      tagClass: ["tag-gray","tag-red","tag-red-2","tag-yellow","tag-yellow-2","tag-blue","tag-blue-2","tag-cyan","tag-green","tag-green-2","tag-purple","tag-purple-2"],
      //复制按钮提示
      tooltipValue: "复制",
      //加载状态
      read_loading: true,
      //链接信息
      linksInfo: {},
      //时间人性化
      timeStr: "",
      //是否收藏
      isCollection: false,
    }
  },
  async asyncData({params,query,req,redirect,error,app}){
    //增加浏览量
    if(!app.$cookies.get("read" + params.id)){
      await app.$api_links.addViewCount(params.id).then(res => {
        if(res.code === 200){
          app.$cookies.set("read" + params.id, params.id);
        }
      });
    }
    //获取网站名称
    let seoInfo = "";
    await app.$api_links.getInfo(params.id).then(res => {
      if(res.code === 200){
        seoInfo = res.data;
      }
    });
    return {
      seoInfo: seoInfo
    };
  },
  validate({ params }) {
    this.id = params.id;
    // 必须是number类型
    return /^\d+$/.test(params.id)
  },
  created(){
    this.id = this.$route.params.id;
  },
  mounted() {
    if(this.isLogin){
      this.isCollect(this.id);
    }
    this.getInfo();
  },
  methods: {
    getInfo(){
      //打乱数组
      this.shuffle(this.tagClass);
      //获取详情
      this.$api_links.getInfo(this.id).then(res => {
        if(res.code === 200){
          this.linksInfo = res.data;
          this.read_loading = false;
          this.timeStr = this.$utils_formatTime.timeStr(this.linksInfo.createTime);
        }else{
          this.$message({
            message: res.msg,
            type: 'error',
            onClose: () => {
              this.$router.push({path: '/error'});
            }
          });
        }
      });
    },
    copy(content){
      const ele = document.createElement('input');
      ele.setAttribute('value', content);
      document.body.appendChild(ele);
      ele.select();
      document.execCommand('copy');
      document.body.removeChild(ele);
      this.$message({
        message: '复制成功',
        type: 'success',
        duration: process.env.MSG_TIME
      });
    },
    //数组随机排序
    shuffle(arr) {
      let i = arr.length;
      while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]];
      }
      return arr;
    },
    //收藏
    collect(id){
      this.$api_links.collect(id).then(res => {
        if(res.code === 200){
          this.$message({
            message: res.msg,
            type: 'success',
            duration: process.env.MSG_TIME
          });
          this.getInfo();
          this.isCollection = true;
        }
      });
    },
    //取消收藏
    cancelCollection(id){
      this.$api_links.cancelCollect(id).then(res => {
        if(res.code === 200){
          this.$message({
            message: res.msg,
            type: 'success',
            duration: process.env.MSG_TIME
          });
          this.getInfo();
          this.isCollection = false;
        }
      });
    },
    //查询是否收藏
    isCollect(id){
      this.$api_links.isCollect(id).then(res => {
        if(res.code === 200){
          this.isCollection = res.data;
        }
      });
    },
  }
}
</script>

<style scoped>
.read-content>div{
  margin-top: 15px;
}
.tag-item{
  padding: 5px 8px;
  text-align: center;
  font-size: 14px;
  border-radius: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: auto;
  display: inline-block;
  margin-right: 5px;
}
</style>
